<template>
    <f7-popover style="width:70%;" :class="'value-popover-' + index">
        <f7-list>
            <f7-list-item>
                <f7-row style="width:100%;">
                    <f7-col>
                        <f7-button style="border-radius:5px;" @click="input(1)">1</f7-button>
                    </f7-col>
                    <f7-col>
                        <f7-button style="border-radius:5px;" @click="input(2)">2</f7-button>
                    </f7-col>
                    <f7-col>
                        <f7-button style="border-radius:5px;" @click="input(3)">3</f7-button>
                    </f7-col>
                    <f7-col>
                        <f7-link color="red" @click="remove">
                            <i style="font-size: 25px" class="f7-icons">trash_fill</i>
                        </f7-link>
                    </f7-col>
                </f7-row>
            </f7-list-item>
            <f7-list-item>
                <f7-row style="width:100%;">
                    <f7-col>
                        <f7-button @click="input(4)">4</f7-button>
                    </f7-col>
                    <f7-col>
                        <f7-button @click="input(5)">5</f7-button>
                    </f7-col>
                    <f7-col>
                        <f7-button @click="input(6)">6</f7-button>
                    </f7-col>
                    <f7-col>
                        <f7-button style="border-radius:5px; font-size:8px" small color="red"
                            @click="clear">清除</f7-button>
                    </f7-col>
                </f7-row>
            </f7-list-item>
            <f7-list-item>
                <f7-row style="width:100%;">
                    <f7-col>
                        <f7-button @click="input(7)">7</f7-button>
                    </f7-col>
                    <f7-col>
                        <f7-button @click="input(8)">8</f7-button>
                    </f7-col>
                    <f7-col>
                        <f7-button @click="input(9)">9</f7-button>
                    </f7-col>
                    <f7-col>
                        <f7-button v-if="index < count - 1" @click="next"
                            style="border-radius:5px; font-size:6px" small color="blue">下一个</f7-button>
                    </f7-col>
                </f7-row>
            </f7-list-item>
            <f7-list-item>
                <f7-row style="width:100%;">
                    <f7-col>
                        <f7-button style="border-radius:5px;" small @click="toggleNegative">—</f7-button>
                    </f7-col>
                    <f7-col>
                        <f7-button style="border-radius:5px;" small @click="input(0)">0</f7-button>
                    </f7-col>
                    <f7-col>
                        <f7-button style="border-radius:5px;" small @click="isDecimal = true">.</f7-button>
                    </f7-col>
                    <f7-col>
                        <f7-button style="border-radius:5px; font-size:8px" @click="determine">确定</f7-button>
                    </f7-col>
                </f7-row>
            </f7-list-item>
        </f7-list>
    </f7-popover>
</template>

<script>
import Common from "@/utils/Common.js";
import DateUtil from "@/utils/DateUtil.js";

export default {
    props: {
    	index: {
    		type: Number
    	},
    	count: {
    		type: Number
    	}
    },
    data: function() {
        return {
        	value: null,
        	isDecimal: false,
        	operator: true
        };
    },
    methods: {
    	open: function(target) {
    		this.$f7.popover.open('.value-popover-' + this.index, target);
    	},
    	close: function() {
            this.$f7.popover.close('.value-popover-' + this.index);
    	},
    	remove: function() {
    		var self = this;
    		this.$f7.dialog.alert('', '你确定要删除该点吗?', function() {
    			self.$emit('delete');
    		});
    	},
    	clear: function() {
    		this.value = null;
    		this.isDecimal = false;
    	},
    	next: function() {
    		this.$emit('next');
    	},
    	determine: function() {
    		this.close();
    	},
    	toggleNegative: function() {
    		this.operator = !this.operator;
    	},
    	input: function(num) {
    		if(!this.isDecimal) {
    			if(this.value == null) {
    				this.value = num;
    			} else {
    				this.value = this.value * 10 + num;
    			}
    		} else {
    			if(this.value == null) {
    				this.value = parseFloat('.' + num);
    			} else {
    				var str = this.value + '';
    				if(str.indexOf('.') > -1) {
    					str += num;
    				} else {
    					str += '.' + num;
    				}
    				this.value = parseFloat(str);
    			}
    		}
    	}
    },
    watch: {
    	'value': function(newVal, oldVal) {
    		var value = this.operator ? this.value : 0 - this.value;
    		this.$emit('change', value);
    	},
    	'operator': function(newVal, oldVal) {
    		var value = this.operator ? this.value : 0 - this.value;
    		this.$emit('change', value);
    	}
    },
    mounted: function() {
    	window.parent.document.addEventListener("backbutton", this.close);
    },
    beforeDestroy: function() {
    	window.parent.document.removeEventListener("backbutton", this.close);
    } 
}
</script>

<style scoped>

</style>
